<template>
	<div style="border-radius: 10px; box-shadow: 0 0 3rem #A8A8A8; margin-bottom: 15px;">
		<img :src="itemPic" style="width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px;" @click="checkItemDetail(itemInfo.num_iid)">
		<div style="padding: 10px 5px;">
			<!-- <span><img src="/static/img/icon_taobao.png" style="width: 1.8rem; height: 1.8rem;"></span> -->
			<span style="font-size: 1.5rem; color: #000000; font-weight: 500;" @click="checkItemDetail(itemInfo.num_iid)">{{itemInfo.title}}</span>
		</div>
		
		<div style="width:90%; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
			<div><s style="font-size: 1.2rem; color: #707070">原价：￥{{itemInfo.zk_final_price}}</s></div>
			<span style="font-size: 1.2rem; color: #707070">销量：{{itemInfo.volume}}</span>
		</div>
		<div style="padding: 0 10px;">
			<!--优惠券样式-->
			<div style="background-image: url(/static/img/quan.png); height: 4rem; padding-left: 3.5rem; background-size: auto 100%; background-position-x: left; background-repeat: no-repeat;">
				<div style="height: 100%; display: flex; align-items: center; font-size: 1.4rem; color: #FF6600; font-weight: 500;">
					<span style="padding-right: 1rem; padding-left: 0.5rem; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-top: solid 2px #FF6600; border-right: solid 2px #FF6600; border-bottom: solid 2px #FF6600;">{{itemInfo.coupon_amount}}元</span>
				</div>
			</div>

			<div style="padding-bottom: 10px;"><span style="font-size: 1.3rem; color: #FF6600;">券后价：</span><span style="font-size: 2rem; font-weight: 600; color: #FF6600;">￥{{itemInfo.coupon_final_price}}</span>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: "itemCard",

	props: {
		itemInfo: {
			type: Object,
			default: () => ({})
		}
	},

	data() {
		return {
			itemPic: ''
		}
	},

	mounted: function() {
		// 使用loading图片占位，等图片加载好后替换成图片链接
		let that = this
		this.itemPic = "http://neimengweixin.cdn.xianyugame.com/66game/tbkloading.gif"
		let newImg = new Image()
		newImg.src = this.itemInfo.pict_url
		newImg.onload = function() {
			that.itemPic = newImg.src
		}
	},
	
	methods: {
		checkItemDetail: function(itemId) {
				this.$router.push({path: 'item-detail', query: {item_id: itemId}})
		}
	}
}
</script>